<template>
	<view class="carry_coin">
		<uni-nav-bar title="提币" color="#fff" leftIcon="left" backgroundColor="#F0DBB0;" :border="false"
			:statusBar="true" :fixed="true" titleClass="custom-title">
			<template v-slot:left>
				<view @click="$common.back()">
					<image src="/static/images/back.png" style="width: 32rpx; height: 32rpx" mode="scaleToFill" />
				</view>
			</template>
		</uni-nav-bar>
		<view class="header-box">
			<view class="left">
				<view class="tips">可提币（1枚酷玩币=1元RMB）</view>
				<view class="num">2346</view>
			</view>
			<image style="width: 280rpx;" mode="widthFix" src="/static/images/Frame 1410104930.png" />
		</view>
		<view class="content-box">
			<view class="tips">提币数额<text>（每日限提三次，总计限额5000）</text></view>
			<input class="coin-num" v-model="Num" placeholder="请输入提币数额" type="number" clearable></input>
			<view class="label">提现账号</view>
			<input class="username" v-model="name" placeholder="支付宝姓名" clearable></input>
			<input class="username" v-model="coinNum" placeholder="支付宝账户" clearable></input>
		</view>
		<view class="confirm-btn" @click="submit">提交提币</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Num:'',
				coinNum: '',
				name:'',
			}
		},
		submit(res){
			console.log(res);
			this.req({
				url:'v1/user/withdraw/apply',
				data:{
					money:this.Num,
					ali_username:this.name,
					ali_name:this.coinNum,
				},
				success: res => {
					console.log(res);
					// if(){
						
					// }
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	/* 定义自定义标题样式 */
	.uni-nav-bar-text {
		span {
			font-weight: bold !important;
			/* 加粗 */
			color: white !important;
			/* 白色文字 */
			text-shadow: 0 0 1px #000,
				/* 基础描边 */
				0 0 1px #000, 0 0 1px #000,
				-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		}
	}

	.carry_coin {
		width: 100%;
		height: 100vh;
		background-color: #F0DBB0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.header-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 40rpx;
			padding-right: 72rpx;

			.tips {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.num {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 80rpx;
				color: #333333;
			}
		}

		.content-box {
			width: 710rpx;
			padding: 40rpx;
			padding-bottom: 0;
			background: #FFF2D8;
			border-radius: 24rpx;

			.tips {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;

				text {
					color: #F36058;
				}
			}

			.coin-num {
				height: 120rpx;
				line-height: 120rpx;
				border-bottom: 2rpx solid #cccccc;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
			}

			.label {
				height: 80rpx;
				line-height: 80rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.username {
				margin-bottom: 40rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #EFD9AD;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				padding: 0 20rpx;
			}
		}
		.confirm-btn {
			margin-top: 200rpx;
			width: 670rpx;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F36058;
			border: 4rpx solid #000000;
			border-radius: 16rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
			text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
			  2px 2px 0 #000;
		}
	}
</style>